{% extends 'layouts/base.html' %}

{% block title %}Test your luck against the roll of the dice{% endblock %}
{% block meta_description %}Compete against yourself and others by guessing the
outcome of a dice roll. Win points and dominate the leaderboard.{% endblock %}

{% block body %}
  <div class="container">
    <div class="row text-center pb-5">
      <div class="col-md-12">
        <h2 class="h1">Feeling lucky?</h2>
        <h3 class="font-weight-light text-muted mt-0">
          Test your luck against the roll of the dice and win today
        </h3>
      </div>
    </div>
    <div class="row text-center pt-5">
      <div class="col-md-4">
        <i class="fas fa-fw fa-5x fa-bullhorn text-primary"></i>
        <h2>Place bets</h2>
        <p class="text-muted">Correctly guess the dice's roll.</p>
        <a href="#" class="btn btn-outline-primary">Sign up</a>
      </div>
      <div class="col-md-4">
        <i class="fas fa-fw fa-5x fa-database text-primary"></i>
        <h2>Win currency</h2>
        <p class="text-muted">Gain coins if your guess is correct.</p>
        <a href="#" class="btn btn-outline-primary">Sign up</a>
      </div>
      <div class="col-md-4">
        <i class="fas fa-fw fa-5x fa-trophy text-primary"></i>
        <h2>Leaderboard</h2>
        <p class="text-muted">Compare your results to others.</p>
        <a href="#" class="btn btn-outline-primary">Sign up</a>
      </div>
    </div>
  </div>
{% endblock %}
